﻿<template>
  <div class="pagination-wrapper">
    <el-pagination
      v-model:current-page="currentPageValue"
      v-model:page-size="pageSizeValue"
      :page-sizes="pageSizes"
      :total="total"
      :layout="layout"
      :background="background"
      :small="small"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      class="custom-pagination"
    />
  </div>
</template>

<script setup>
import { computed, watch } from "vue";

/**
 * 分页组件属性定义
 */
const props = defineProps({
  /** 当前页码 */
  currentPage: {
    type: Number,
    default: 1,
  },
  /** 每页显示数量 */
  pageSize: {
    type: Number,
    default: 10,
  },
  /** 总数据量 */
  total: {
    type: Number,
    default: 0,
  },
  /** 每页显示数量的选项 */
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100],
  },
  /** 分页布局，子组件名用逗号分隔 */
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  /** 是否为小型分页 */
  small: {
    type: Boolean,
    default: false,
  },
  /** 是否添加背景色 */
  background: {
    type: Boolean,
    default: true,
  },
});

/**
 * 组件事件定义
 */
const emit = defineEmits(["update:currentPage", "update:pageSize", "pagination"]);

/**
 * 当前页码的计算属性
 */
const currentPageValue = computed({
  get: () => props.currentPage,
  set: val => emit("update:currentPage", val),
});

/**
 * 每页大小的计算属性
 */
const pageSizeValue = computed({
  get: () => props.pageSize,
  set: val => emit("update:pageSize", val),
});

/**
 * 处理页码变化
 * @param {number} page - 新的页码
 */
const handleCurrentChange = page => {
  emit("pagination", {
    pageNum: page,
    pageSize: pageSizeValue.value,
  });
};

/**
 * 处理每页大小变化
 * @param {number} size - 新的每页大小
 */
const handleSizeChange = size => {
  emit("pagination", {
    pageNum: currentPageValue.value,
    pageSize: size,
  });
};
</script>

<style scoped lang="scss">
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: $spacing-lg 0;

  .custom-pagination {
    @include theme-transition;

    :deep(.el-pagination) {
      justify-content: center;
      align-items: center;
    }

    :deep(.el-pagination__total) {
      color: $color-text-secondary;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
    }

    :deep(.el-pagination__sizes) {
      .el-select {
        .el-input {
          .el-input__wrapper {
            border-radius: $border-radius-base;
            border: 1px solid $border-color-light;
            transition: all $transition-fast;

            &:hover {
              border-color: $color-primary-light-3;
            }
          }
        }
      }
    }

    :deep(.el-pager) {
      li {
        background-color: transparent;
        border-radius: $border-radius-base;
        margin: 0 $spacing-xs;
        transition: all $transition-fast;
        font-weight: $font-weight-medium;

        &:hover {
          background-color: $color-primary-light-8;
          color: $color-primary;
        }

        &.is-active {
          background-color: $color-primary;
          color: white;
          font-weight: $font-weight-semibold;
        }
      }
    }

    :deep(.btn-prev),
    :deep(.btn-next) {
      background-color: transparent;
      border-radius: $border-radius-base;
      transition: all $transition-fast;

      &:hover {
        background-color: $color-primary-light-8;
        color: $color-primary;
      }

      &:disabled {
        color: $color-text-disabled;
        cursor: not-allowed;

        &:hover {
          background-color: transparent;
        }
      }
    }

    :deep(.el-pagination__jump) {
      color: $color-text-secondary;
      font-size: $font-size-sm;

      .el-input {
        .el-input__wrapper {
          border-radius: $border-radius-base;
          width: 50px;

          .el-input__inner {
            text-align: center;
            font-weight: $font-weight-medium;
          }
        }
      }
    }
  }
}

// 响应式设计
@include respond-below(md) {
  .pagination-wrapper {
    padding: $spacing-md 0;

    .custom-pagination {
      :deep(.el-pagination) {
        flex-wrap: wrap;
        justify-content: center;
        gap: $spacing-sm;
      }

      :deep(.el-pagination__total),
      :deep(.el-pagination__jump) {
        font-size: $font-size-xs;
      }
    }
  }
}

@include respond-below(sm) {
  .pagination-wrapper {
    .custom-pagination {
      :deep(.el-pagination) {
        .el-pagination__sizes {
          display: none;
        }

        .el-pagination__jump {
          display: none;
        }
      }
    }
  }
}
</style>
